{% extends "admin/base.html" %}

{% block title %}教师管理{% endblock %}

{% block content %}
<div class="flex flex-col md:flex-row items-center justify-between mb-8">
    <!-- 搜索栏 -->
  <form id="teacherSearchForm" action="/admin/teacher_search" method="GET" class="relative w-full md:w-1/2 lg:w-1/3">
    <input
        type="text"
        name="keyword"
        placeholder="搜索工号/姓名"
        class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 text-sm"
        aria-label="教师搜索"
    >
    <button
        type="submit"
        class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary focus:outline-none bg-transparent p-0 m-0 transition-colors"
    >
        <i class="fa fa-search"></i>
    </button>
</form>

    <!-- 新增按钮 -->
    <div class="md:flex-shrink-0">
        <button id="addTeacherBtn" class="btn btn-primary btn-hover scale-animation text-sm px-6 py-3" onclick="openAddModal()">
            <i class="fa fa-plus mr-2"></i> 新增教师
        </button>
    </div>
</div>

{% if search_keyword %}
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4">
    <p class="text-sm text-blue-700">
        <i class="fa fa-search mr-2"></i>搜索结果："{{ search_keyword }}"（共 {{ teachers|length }} 条记录）
    </p>
</div>
{% endif %}

<!-- 教师列表卡片 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
    <table class="min-w-full">
        <thead>
            <tr class="bg-primary/5">
                <th class="px-6 py-3 border-b-2 border-gray-200 text-left text-sm font-medium text-primary">工号</th>
                <th class="px-6 py-3 border-b-2 border-gray-200 text-left text-sm font-medium text-primary">姓名</th>
                <th class="px-6 py-3 border-b-2 border-gray-200 text-left text-sm font-medium text-primary">职称</th>
                <th class="px-6 py-3 border-b-2 border-gray-200 text-left text-sm font-medium text-primary">部门</th>
                <th class="px-6 py-3 border-b-2 border-gray-200 text-left text-sm font-medium text-primary">电话</th>
                <th class="px-6 py-3 border-b-2 border-gray-200 text-right text-sm font-medium text-primary">操作</th>
            </tr>
        </thead>
        <tbody>
            {% for teacher in teachers %}
            <tr class="hover:bg-gray-50 transition-colors" data-id="{{ teacher.id }}">
                <td class="px-6 py-4 border-b border-gray-200 text-sm text-neutral-dark">
                    {{ teacher.teacher_no }}
                </td>
                <td class="px-6 py-4 border-b border-gray-200 text-sm text-neutral-dark font-medium">
                    {{ teacher.username }}
                </td>
                <td class="px-6 py-4 border-b border-gray-200 text-sm text-neutral-dark font-medium">
                    {{ teacher.title }}
                </td>
                <td class="px-6 py-4 border-b border-gray-200 text-sm text-neutral-dark">
                    {{ teacher.department }}
                </td>
                <td class="px-6 py-4 border-b border-gray-200 text-sm text-neutral-dark">
                    {{ teacher.email }}  <!-- 学生管理用telephone，教师管理根据模型可能是email或telephone，此处按你的模型写email -->
                </td>
                <td class="px-6 py-4 border-b border-gray-200 text-right text-sm">
                    <!-- 编辑按钮 -->
                    <button class="text-primary hover:text-primary/70 mr-2"
                            onclick="openEditModal({{ teacher.id }})">
                        <i class="fa fa-pen-alt"></i>  <!-- 学生管理用fa-pen-alt -->
                    </button>

                    <!-- 删除按钮 -->
                    <button class="text-red-500 hover:text-red-700"
                            onclick="confirmDelete({{ teacher.id }})">
                        <i class="fa fa-trash-alt"></i>  <!-- 学生管理用fa-trash-alt -->
                    </button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- 空数据提示 -->
    {% if not teachers %}
    <div class="p-12 text-center">
        <div class="mb-6">
            <i class="fa fa-users text-4xl text-primary/20"></i>  <!-- 学生管理的空数据图标 -->
        </div>
        <h3 class="text-lg font-bold text-neutral-dark mb-2">还没有教师记录</h3>
        <p class="text-gray-500 mb-6">点击下方按钮添加第一位教师</p>
        <button class="btn btn-primary btn-hover scale-animation" onclick="openAddModal()">
            <i class="fa fa-plus mr-2"></i> 新增教师
        </button>
    </div>
    {% endif %}
</div>


<!-- 模态框 -->
<div id="modal" class="fixed inset-0 flex items-center justify-center z-50 bg-black/50 opacity-0 pointer-events-none transition-opacity duration-300">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-4xl p-6 md:p-8 transform scale-95 transition-transform duration-300" id="modalContent">
        <!-- 关闭按钮 -->
        <button class="absolute top-4 right-4 w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-colors" onclick="closeModal()">
            <i class="fa fa-times text-gray-500"></i>
        </button>

        <!-- 标题和图标 -->
        <div class="flex items-center mb-6">
            <div id="modalIcon" class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center mr-3">
                <i class="fa fa-chalkboard-teacher text-primary"></i> <!-- 教师图标 -->
            </div>
            <h2 class="text-xl font-bold text-gray-800" id="modalTitle">新增教师</h2>
        </div>

        <!-- 表单 -->
        <form id="teacherForm" class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <input type="hidden" id="teacherId" name="teacherId"> <!-- 隐藏ID字段 -->

            <!-- 基础信息卡片（左列） -->
            <div class="bg-gray-50 rounded-xl p-5 space-y-4 w-full md:col-span-1">
                <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                    <i class="fa fa-user-circle text-gray-500 mr-2"></i> 基础信息
                </h3>

                <!-- 姓名 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="username">姓名</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-user"></i>
                        </span>
                        <input type="text" id="username" name="username" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20" required>
                    </div>
                </div>

                <!-- 工号 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="teacherNo">工号</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-id-card"></i>
                        </span>
                        <input type="text" id="teacherNo" name="teacherNo" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20" required pattern="T\d+" title="工号需以T开头">
                    </div>
                </div>

                <!-- 职称 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="title">职称</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-user-tie"></i>
                        </span>
                        <select id="title" name="title" class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20" required>
                            <option value="">请选择职称</option>
                            <option value="助教">助教</option>
                            <option value="讲师">讲师</option>
                            <option value="副教授">副教授</option>
                            <option value="教授">教授</option>
                        </select>
                    </div>
                </div>

                <!-- 部门 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="department">部门</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-building"></i>
                        </span>
                        <input type="text" id="department" name="department" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20" required>
                    </div>
                </div>
            </div>

            <!-- 联系与账户信息卡片（右列） -->
            <div class="bg-gray-50 rounded-xl p-5 space-y-4 w-full md:col-span-1">
                <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                    <i class="fa fa-address-card text-gray-500 mr-2"></i> 联系与账户信息
                </h3>

                <!-- 邮箱 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="email">邮箱</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-envelope"></i>
                        </span>
                        <input type="email" id="email" name="email" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20" placeholder="可选">
                    </div>
                </div>

                <!-- 电话 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="telephone">电话</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-phone"></i>
                        </span>
                        <input type="tel" id="telephone" name="telephone" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20" pattern="^1[3-9]\d{9}$" title="可选，11位手机号">
                    </div>
                </div>

                <!-- 地址 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="address">地址</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-map-marker"></i>
                        </span>
                        <input type="text" id="address" name="address" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20" placeholder="可选">
                    </div>
                </div>

                <!-- 密码 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="password">密码</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-key"></i>
                        </span>
                        <input type="password" id="password" name="password" class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20"
                               {% if currentModal == 'addTeacher' %}required{% endif %}
                               minlength="6" maxlength="120">
                        <button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 toggle-password">
                            <i class="fa fa-eye-slash"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 入职日期（跨列显示） -->
            <div class="bg-gray-50 rounded-xl p-5 space-y-4 w-full md:col-span-2">
                <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                    <i class="fa fa-calendar text-gray-500 mr-2"></i> 入职信息
                </h3>

                <!-- 入职日期 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="hireDate">入职日期</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-calendar"></i>
                        </span>
                        <input type="date" id="hireDate" name="hireDate" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20" required>
                    </div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="w-full flex items-center justify-end pt-4 space-x-4 md:col-span-2">
                <button type="button" class="px-5 py-2.5 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50" onclick="closeModal()">
                    <i class="fa fa-times mr-1"></i> 取消
                </button>
                <button type="button" id="saveButton" class="px-5 py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 shadow-md hover:shadow-lg">
                    <i class="fa fa-check mr-1"></i> 保存
                </button>
            </div>
        </form>
    </div>
</div>

<script src="{{ url_for('static', filename='js/admin_js/admin_teacher.js') }}"></script>
{% endblock %}